<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师名" clearable/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>

      <el-form-item label="添加时间">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!--列表表格-->
    <el-table
        :data="list"
        style="width: 100%"
        element-loading-text="数据加载中..."
        border
        fit
        highlight-current-row>

        <el-table-column
          label="序号"
          width="70"
          align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          width="80">
        </el-table-column>

        <el-table-column
          label="头衔"
          width="80">
          <template slot-scope="scope">
            {{ scope.row.level === 1 ? '高级讲师' : '首席讲师'}}
          </template>
        </el-table-column>

        <el-table-column
          prop="intro"
          label="资历">
        </el-table-column>

        <el-table-column
          prop="gmtCreate"
          label="添加时间"
          width="160">
        </el-table-column>

        <el-table-column
          prop="sort"
          label="排序"
          width="60">
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <router-link :to="'/teacher/edit/'+scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deleteTeacher(scope.row.id, scope.row.name)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      @current-change="getList"
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper">
    </el-pagination>



  </div>
</template>

<script>
    import teacher from "@/api/edu/teacher";
    export default {
      name: "list",
      data() {
        return {
          list:null,
          page:1,
          limit:5,
          total:0,
          teacherQuery:{}
        }
      },

      created() {
        this.getList();
      },

      methods:{
        getList(page = 1) {
          this.page = page;
          teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
          .then(response => {

            this.list = response.data.rows;
            this.total = response.data.total;

          })
          .catch(error => {
            console.log(error)
          })
        },

        deleteTeacher(id, name) {
          this.$confirm(`是否删除讲师: ${name}?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            teacher.deleteTeacherById(id)
              .then(res => {
                if (res.code == 20000) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.getList(this.page);
                } else {
                  this.$message.error("删除失败!");
                }
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        resetData() {
          this.teacherQuery = {}
          this.getList()
        },

      }
    }
</script>

<style scoped>

</style>
